class Slider {
constructor(id, cycle = 3000){
    this.container = document.getElementById(id);
    this.items = this.container.querySelectorAll('.slider-list__item, .slider-list__item--selected');
    this.cycle = cycle;

    const controller = this.container.querySelector('.slide-list__control');
    if(controller){
    const buttons = controller.querySelectorAll('.slide-list__control-buttons, .slide-list__control-buttons--selected');
    controller.addEventListener('mouseover', evt=>{
        const idx = Array.from(buttons).indexOf(evt.target);
        if(idx >= 0){
        this.slideTo(idx);
        this.stop();
        }
    });
    
    controller.addEventListener('mouseout', evt=>{
        this.start();
    });
    
    this.container.addEventListener('slide', evt => {
        const idx = evt.detail.index
        const selected = controller.querySelector('.slide-list__control-buttons--selected');
        if(selected) selected.className = 'slide-list__control-buttons';
        buttons[idx].className = 'slide-list__control-buttons--selected';
    })
    }
    
    const previous = this.container.querySelector('.slide-list__previous');
    if(previous){
    previous.addEventListener('click', evt => {
        this.stop();
        this.slidePrevious();
        this.start();
        evt.preventDefault();
    });
    }
    
    const next = this.container.querySelector('.slide-list__next');
    if(next){
    next.addEventListener('click', evt => {
        this.stop();
        this.slideNext();
        this.start();
        evt.preventDefault();
    });
    }
}
getSelectedItem(){
    let selected = this.container.querySelector('.slider-list__item--selected');
    return selected
}
getSelectedItemIndex(){
    return Array.from(this.items).indexOf(this.getSelectedItem());
}
slideTo(idx){
    let selected = this.getSelectedItem();
    if(selected){ 
    selected.className = 'slider-list__item';
    }
    let item = this.items[idx];
    if(item){
    item.className = 'slider-list__item--selected';
    }
    const detail = {index: idx}
    const event = new CustomEvent('slide', {bubbles:true, detail})
    this.container.dispatchEvent(event)
}
slideNext(){
    let currentIdx = this.getSelectedItemIndex();
    let nextIdx = (currentIdx + 1) % this.items.length;
    this.slideTo(nextIdx);
}
slidePrevious(){
    let currentIdx = this.getSelectedItemIndex();
    let previousIdx = (this.items.length + currentIdx - 1) % this.items.length;
    this.slideTo(previousIdx);  
}
start(){
    this.stop();
    this._timer = setInterval(()=>this.slideNext(), this.cycle);
}
stop(){
    clearInterval(this._timer);
}
}

const slider = new Slider('my-slider');
slider.start();
